<template>
	<div v-loading="loading" class="w-100% h-100vh">
		<el-button-group>
			<el-button @click="downloadExcel" type="primary" class="mr-20px!">下载大文件 Excel</el-button>
			<el-button type="success" @click="count++">点击操作{{ count }}</el-button>
		</el-button-group>
	</div>
</template>

<script setup>
import { writeFile, utils } from 'xlsx'
const count = ref(0)
const loading = ref(false)

/**模拟生成大文件数据 */
const generateLargeFileData = () => {
	const data = []
	for (let i = 0; i < 400000; i++) {
		data.push({
			id: i + 1,
			name: `User ${i + 1}`,
			email: `user${i + 1}@example.com`,
			age: Math.floor(Math.random() * 100) + 1
		})
	}
	return data
}
/**下载大文件 */
const downloadExcel = async () => {
	// 模拟生成大文件数据
	const data = generateLargeFileData()
	loading.value = true
	// 模拟一段短暂的等待时间，确保状态更新
	await delay(1000)
	// 卡死的罪魁祸者
	// 异步执行生成 Excel 文件的操作
	await generateExcelFile(data)

	loading.value = false
}
// 异步生成 Excel 文件
const generateExcelFile = async (data) => {
	return new Promise((resolve, reject) => {
		// 将数据转换为 Excel 格式
		const ws = utils.json_to_sheet(data)
		const wb = utils.book_new()
		utils.book_append_sheet(wb, ws, 'Sheet1')
		// 模拟生成 Excel 文件的短暂等待时间
		setTimeout(() => {
			writeFile(wb, 'test.xlsx')
			resolve()
		}, 500)
	})
}
</script>
